<template>
  <div class="app-container">
<!--    <el-form ref="form" :model="form" inline>-->
<!--      <el-form-item prop="search">-->
<!--        <el-input v-model="form.search" clearable style="width:300px" prefix-icon="el-icon-search" placeholder="输入权限名、描述、路径搜索" />-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button type="success" icon="el-icon-search" size="medium" @click="search(form)">搜索</el-button>-->
<!--        <el-button type="warning" icon="el-icon-refresh-left" size="medium" @click="resetForm()">重置</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
    >
      <el-table-column
        prop="instance_name"
        label="申请实例名称"
        width="180"

      />

      <el-table-column
        prop="apply_member"
        label="申请人"
        width="180"

      />

      <el-table-column
        prop="responsible_member"
        label="负责人"
        width="120"
      >
      </el-table-column>

      <el-table-column
        prop="zone"
        label="云环境"
        width="100"
      />
      <el-table-column
        prop="env"
        label="应用环境"
        width="100"
      />
      <el-table-column
        prop="app"
        label="应用"
        width="100"
      >
        <template slot-scope="scope">
          <div v-for="(item, index)  in scope.row.app" :key="index">
<!--            <el-tag type="success">{{ item }}</el-tag>-->
            {{ item }}
          </div>
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--        label="Tags"-->
<!--        prop="tags"-->
<!--        width="200"-->
<!--        show-overflow-tooltip-->
<!--      >-->
<!--        <template slot-scope="scope">-->
<!--          <div v-for="(item, index) in scope.row.tags" :key="index">-->
<!--            {{ item }}-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column
        prop="cache"
        label="缓存"
        width="100"
      >
        <template slot-scope="scope">
          <div v-for="(item, index)  in scope.row.cache" :key="index">
<!--            <el-tag type="success">{{ item }}</el-tag>-->
            {{ item }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="msg_middleware"
        label="消息中间件"
        width="100"
      >
        <template slot-scope="scope">
          <div v-for="(item, index)  in scope.row.msg_middleware" :key="index">
<!--            <el-tag type="success">{{ item }}</el-tag>-->
            {{ item }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="db"
        label="数据库"
        width="100"
      >
        <template slot-scope="scope">
          <div v-for="(item, index)  in scope.row.db" :key="index">
<!--            <el-tag type="success">{{ item }}</el-tag>-->
            {{ item }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="resources"
        label="资源详情"
        width="220"
      >
        <template slot-scope="scope">
          <div v-for="(value, name,index)  in scope.row.resources" :key="index">

            <el-tag type="success"  v-if="name === 'frontend'"  >前端VUE</el-tag>
            <el-tag type="success"  v-else-if="name === 'backend'"> 后端TOMCAT</el-tag>
            <el-tag type="warning"  v-if="value === 'low'" > 低配 </el-tag>
            <el-tag type="warning"  v-else-if="value === 'standard'" >标配</el-tag>
            <el-tag type="warning"  v-else-if="value === 'high'" >高配</el-tag>
            <el-tag type="warning"  v-else >无</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="domain"
        label="域名详情"
        width="300"
      >
        <template slot-scope="scope">
          <div v-for="(value, name,index)  in scope.row.domain" :key="index">
            <el-tag type="success"   v-if="name === 'internal'"> 内网  </el-tag>
            <el-tag type="success"  v-else-if="name === 'public_enable' " > 公网  </el-tag>
            <el-tag type="success"  v-else-if="name === 'public' " > 公网域名  </el-tag>
            <el-tag type="warning"  v-if="value === true "> 启用  </el-tag>
            <el-tag type="warning"  v-else-if="value === false  "> 不启用  </el-tag>
            <el-tag type="warning"  v-else-if="value !== true && value  "> {{value}}  </el-tag>
            <el-tag type="warning"  v-else> 无  </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="approve_check"
        label="申请进度"
        width="100"
      >
        <template slot-scope="{row}">
          <el-tag v-if="row.approve_check"  type="success" >已完成</el-tag>
          <el-tag v-else type="primary">进行中</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        width="200"
        label="审批进度"
      >
        <template slot-scope="{row}">
          <el-button type="danger"  size="mini"  @click="checkProgress(row)">审批管理</el-button>
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--        fixed="right"-->
<!--        width="400"-->
<!--        label="审批人确认"-->
<!--      >-->
<!--        <template slot-scope="{row}">-->
<!--          <el-button type="primary"  size="mini"  @click="checkApproveFirst(row)">开发负责人</el-button>-->
<!--          <el-button type="warning"  size="mini"  @click="checkApproveSecond">运维管理员</el-button>-->
<!--          <el-button type="success"  size="mini"  @click="checkApproveThird">IT负责人</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <checkProgress v-if="cuDialogVisible" :dialog-visible="cuDialogVisible"  :instance-id="instanceId" @getApproveInstanceData="getApproveInstanceData" @close="close" />
  </div>
</template>

<script>
import { getApproveInstance } from "@/api/approve/apply"
import checkProgress from "./checkProgress"
export default {
  name: "recordList",
  components: {checkProgress},
  data() {
      return {
        form: {
          search: '',
          ordering: 'id'
        },
        tableData: [],
        cuDialogVisible:false,
        progressStep: 0,
        instanceId: 0
      }
    },
  created() {
   this.getApproveInstanceData()
  },
  methods: {

    getApproveInstanceData(){

      getApproveInstance().then(res => {
        console.log(res.data.results)
        this.tableData = res.data.results
        // this.form.page = 1
        // this.total = res.data.count
      })
    },
      checkProgress(row){
        console.log(row)
        // console.log(this.cuDialogVisible);
        this.cuDialogVisible=true
        this.instanceId  = row.id
      },

    close() {
        this.cuDialogVisible = false
      }

  }
}
</script>

<style scoped>
.el-tag{
  margin: 2px;
}
</style>
